<template>
  <div class="music-list">
    <mu-appbar :title="title" class="appbar" ref="appbarheader">
      <mu-icon-button icon="close" slot="left" @click="back" />
    </mu-appbar>
    <div class="bg-image" :style="bgStyle" ref="bgimage">
      <div class="paly-wrapper">
        <mu-paper v-show="songs.length>0">
          <mu-raised-button label="随机播放全部" class="demo-raised-button" icon="play_circle_outline" @click="random" primary/>
        </mu-paper>
      </div>
      <div class="filter" ref="filter"></div>
    </div>
    <div class="bg-layer" ref="layer">
    </div>
    <scroll :data="songs" :probeType="probeType" :listenScroll="listenScroll" @scroll="scroll" class="list" ref="list">
      <mu-paper class="demo-paper" :zDepth="0">
        <div class="song-list-wrrapper">
          <mu-list>
            <mu-list-item :title="song.name" :describeText="song.singer+'-'+song.album" v-for="(song,index) in songs" @click="selectItem(song,index)">
              <mu-avatar :src="song.image" slot="leftAvatar" />
            </mu-list-item>
          </mu-list>
        </div>
      </mu-paper>
      <div class="loading-container" v-show="!songs.length>0">
        <loading></loading>
      </div>
    </scroll>

  </div>
</template>
<script>
  import scroll from "@/base/scroll"
  import loading from "@/base/loading"
  import {
    mapActions
  } from "vuex"
  import {
    prefixStyle
  } from "@/assets/js/dom"
  const transform = prefixStyle('transform')
  const backdrop = prefixStyle('backdrop-filter')
  export default {
    name: "component_name",
    props: {
      songs: {
        type: Array,
        default: []
      },
      title: {
        type: String,
        default: ""
      },
      bgimage: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        scrollY: 0
      };
    },
    methods: {
      ...mapActions([
        'selectPlay',
        'randomPlay'
      ]),
      scroll(pos) {
        this.scrollY = pos.y
      },
      back() {
        this.$router.back()
      },
      selectItem(item, index) {
        this.selectPlay({
          list: this.songs,
          index
        })
      },
      random(){
        this.randomPlay({
          list: this.songs
        })
      }
    },
    watch: {
      scrollY(newval) {
        let translateY = Math.max(this.minTranslateY, newval)
        let zIndex = 0
        let scale = 1
        let blur = 0
        this.$refs.layer.style[transform] = 'translate3d(0,' + translateY + 'px,0)'
        const percent = Math.abs(newval / this.imageHeight)
        if (newval > 0) {
          scale = 1 + percent
          zIndex = 10
        } else {
          blur = parseInt(Math.min(20 * percent, 20))
        }
        this.$refs.filter.style[backdrop] = 'blur(' + blur + 'px)'
        if (newval < this.minTranslateY) {
          zIndex = 10;
          this.$refs.bgimage.style.paddingTop = 0
          this.$refs.bgimage.style.height = this.$refs.appbarheader.$el.clientHeight + 'px'
        } else {
          zIndex = 0;
          this.$refs.bgimage.style.paddingTop = "70%"
          this.$refs.bgimage.style.height = 0
        }
        this.$refs.bgimage.style[transform] = 'scale(' + scale + ')'

        this.$refs.bgimage.style.zIndex = zIndex
      }
    },
    computed: {
      bgStyle() {
        return 'background-image:url(' + this.bgimage + ')'
      }
    },
    created() {
      this.probeType = 3
      this.listenScroll = true
    },
    mounted() {
      this.imageHeight = this.$refs.bgimage.clientHeight
      this.minTranslateY = -(this.imageHeight - this.$refs.appbarheader.$el.clientHeight)
      this.$refs.list.$el.style.top = this.imageHeight + "px"
    },
    components: {
      scroll,
      loading
    },
  }

</script>
<style lang="scss" scoped>
  .music-list {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #474a4f;
    z-index: 99999;
    .appbar {
      position: absolute;
      background: rgba(0, 0, 0, 0.2);
      z-index: 99;
    }
    .bg-image {
      position: relative;
      width: 100%;
      height: 0;
      padding-top: 70%;
      transform-origin: top;
      background-size: cover;
      .filter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; // background: rgba(7, 17, 27, 0.4);
      }
      .paly-wrapper {
        position: absolute;
        bottom: 0px;
        right: 0px;
        z-index: 99;
      }
    }
    .bg-layer {
      position: relative;
      height: 100%; // background: #474a4f;
    }
    .list {
      position: fixed;
      -webkit-overflow-scrolling: touch;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  }

  .loading-container {
    position: absolute;
    width: 100%;
    top: 50%;
    transform: translateY(-50%)
  }

</style>
